<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>终端调试</title>
    <script src="js\Jquery3.1.1.js"></script>
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="layui/lay/modules/layer.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/modules/layer/default/layer.css"/>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <style>
        table {
            border: solid white 1px;

        }
    </style>
</head>
<body style="background-color: #2C3E50">
<div style="text-align: center">
    <table class="layui-table">
        <thead>
        <tr>
            <th colspan="3">读者卡读卡器</th>
        </tr>
        </thead>
        <tr>
            <td><input class="layui-btn" type="button" onclick="dervice('OpenReaderCardDervice')" value="打开读者卡读卡器"/>
            </td>
            <td><input class="layui-btn" type="button" onclick="derviceClose('CloseReaderCardDervice')"
                       value="关闭读者卡读卡器"/></td>
            <td><input class="layui-btn" type="button" onclick="derviceStatus('getReaderCardDervice')"
                       value="查看读者卡读卡器状态"/></td>
        <tr>
        <tr>
            <td>当前状态：</td>
            <td colspan="2" id="readerCard">未知</td>
        </tr>
        <tbody id="reader">

        </tbody>
    </table>
    <table class="layui-table">
        <thead>
        <tr>
            <th colspan="3">RFID读卡器</th>
        </tr>
        </thead>
        <tr>
            <td><input class="layui-btn" type="button" onclick="dervice('OpenRfidReaderDervice')" value="打开RFID读卡器"/>
            </td>
            <td><input class="layui-btn" type="button" onclick="derviceClose('CloseRfidReaderDervice')"
                       value="关闭RFID读卡器"/></td>
            <td><input class="layui-btn" type="button" onclick="derviceStatus('getRfidReaderDerviceStatus')"
                       value="查看RFID读卡器状态"/></td>
        <tr>
        <tr>
            <td>当前状态：</td>
            <td colspan="2" id="RDIDReader">未知</td>
        </tr>
        <tbody id="rfID">

        </tbody>
    </table>
    <table class="layui-table">
        <thead>
        <tr>
            <th colspan="3">身份证读卡器</th>
        </tr>
        </thead>
        <tr>
            <td><input class="layui-btn" type="button" onclick="dervice('openIDCardReaderDervice')" value="打开身份证读卡器"/>
            </td>
            <td><input class="layui-btn" type="button" onclick="derviceClose('CloseIDCardReaderDervice')"
                       value="关闭身份证读卡器"/></td>
            <td><input class="layui-btn" type="button" onclick="derviceStatus('getIDCardReaderDervice')"
                       value="查看身份证读卡器状态"/></td>
        <tr>
        <tr>
            <td>当前状态：</td>
            <td colspan="2" id="idCardReader">未知</td>
        </tr>
        <tbody id="idCard">

        </tbody>
    </table>
</div>
<div style="width: 50%;margin: 0 auto;margin-top: 50px;text-align: center">
    <button id="goTearminalPage" class="layui-btn layui-btn-fluid  layui-btn-lg layui-btn-radius layui-btn-normal">
        前往自助借还书机页面
    </button>
</div>
<div id="zhezhao"
     style="position: absolute;width: 100%;height: 100%;background-color: black;top: 0;left: 0;opacity: 0.7;text-align: center">
</div>
<form id="form" class="layui-form" action=""
      style="background-color: white;opacity: 1;border: solid white 1px;width: 25%;z-index: 99999;position: absolute;top: 30%;left: 37%;padding: 10px">
    <div class="layui-form-item">
        <label class="layui-form-label">登录</label>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">帐号</label>
        <div class="layui-input-block">
            <input type="text" name="adminName" required lay-verify="required" placeholder="请输入管理帐号" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="adminPassword" required lay-verify="required" placeholder="请输入管理密码"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <button style="width: 100%" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
    </div>

</form>
<script>
    //开启设备
    function dervice(url) {
        $.ajax({
            url: url,
            success: function (res) {
                console.log(res);
                if (res.dervice_type == "idCard") {
                    //身份证
                    $("#idCardReader").html(res.msg);
                }
                if (res.dervice_type == "RFID") {
                    //RFID
                    $("#RDIDReader").html(res.msg);
                }
                if (res.dervice_type == "reader") {
                    //读者卡
                    $("#readerCard").html(res.msg);
                }
            }
        });
    }

    //关闭设备
    function derviceClose(url) {
        $.ajax({
            url: url,
            success: function (res) {
                console.log(res);
                if (res.dervice_type == "idCard") {
                    //身份证
                    $("#idCardReader").html(res.msg);
                    $("#idCard").html("");
                }
                if (res.dervice_type == "RFID") {
                    //RFID
                    $("#RDIDReader").html(res.msg);
                    $("#rfID").html("");
                }
                if (res.dervice_type == "reader") {
                    //读者卡
                    $("#readerCard").html(res.msg);
                    $("#reader").html("");
                }
            }
        });
    }

    //设备状态
    function derviceStatus(url) {
        $.ajax({
            url: url,
            success: function (res) {
                console.log(res);
                if (res.dervice_type == "idCard") {
                    //身份证
                    $("#idCardReader").html(res.msg);
                }
                if (res.dervice_type == "RFID") {
                    //RFID
                    $("#RDIDReader").html(res.msg);
                }
                if (res.dervice_type == "reader") {
                    //读者卡
                    $("#readerCard").html(res.msg);
                }
            }
        });
    }
</script>
<script>
    var ip = "";
    var port = "";
    $.ajax({
        url: 'getIPandPort',
        async: false,
        success: function (res) {
            port = res.port;
            ip = res.ip;
        }
    });
    var ws = new WebSocket("ws://" + ip + ":" + port + "/sokect");
    ws.onopen = function () {
        console.log("连接成功")
    }
    ws.onmessage = function (evt) {
        var msg = JSON.parse(evt.data);
        var tr = "";
        var idCardParam = ["终端类型", "终端号", "生日", "身份证有效期", "返回消息", "身份证签发时间", "验证状态码", "名族", "姓名", "寻卡状态", "身份证读卡状态码", "设备类型", "性别", "身份证号", "住址"];
        var readerCardParam = ["终端类型", "终端号", "读者卡号", "设备类型"];
        var RFIDParam = ["终端类型", "终端号", "RFID号", "设备类型"];
        if (msg.from == "reader") {
            $("#reader").html("");
        } else if (msg.from == "rfid") {
            $("#rfID").html("");
        } else {
            $("#idCard").html("");
        }
        var i = 0;
        console.log(msg);
        for (var key in msg) {
            if (msg.from == "reader") {
                tr = "<tr><td>" + readerCardParam[i] + "</td><td>" + key + "</td><td>" + msg[key] + "</td></tr>";
                $("#reader").append(tr);
            } else if (msg.from == "rfid") {
                tr = "<tr><td>" + RFIDParam[i] + "</td><td>" + key + "</td><td>" + msg[key] + "</td></tr>";
                $("#rfID").append(tr);
            } else {
                tr = "<tr><td>" + idCardParam[i] + "</td><td>" + key + "</td><td>" + msg[key] + "</td></tr>";
                $("#idCard").append(tr);
            }
            i++;
        }
    };
    ws.onclose = function () {
        console.log("连接已关闭...")
    };
</script>
<script>
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use('element', function () {
        var element = layui.element;
    });
    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            $.ajax({
                url: 'managerLogin',
                data: data.field,
                success: function (res) {
                    if (res == "0") {
                        $("#zhezhao").hide();
                        $("#form").hide();
                    } else {
                        layer.alert("帐号或密码错误");
                    }
                }
            });
            return false;
        });
    });
</script>
<script>
    $.ajax({
        url: 'getAllDerviceStatus',
        async: false,
        success: function (res) {
            for (var i = 0; i < res.length; i++) {
                if (res[i].type == "readerCard") {
                    //身份证读卡器
                    $("#readerCard").html(res[i].msg);
                }
                if (res[i].type == "RDIDReader") {
                    //RFID读卡器
                    $("#RDIDReader").html(res[i].msg);
                }
                if (res[i].type == "idCardReader") {
                    //读者卡读卡器
                    $("#idCardReader").html(res[i].msg);
                }
            }
        }
    });
</script>
<script>
    $("#goTearminalPage").click(function () {
        $.ajax({
            url: 'getConfigAllParam',
            async: false,
            success: function (res) {
                location.href = "http://" + res.paramList.serverIP + ":" + res.paramList.serverPort + "/DangD/login1";
            }
        });
    });
</script>
</body>
</html>